<template>
  <div>
<van-nav-bar
  title="账号登录"
  left-arrow
  @click-left="$router.back()"
/>
<van-form @submit="onSubmit">
  <van-field
    v-model="form.username"
    placeholder="用户名"
  :rules="[
        {required:true,message:'请输入用户名'},
        {pattern:/^[A-Za-z0-9]{4,10}$/,message:'请输入4-10位' }
        ]" />
  <van-field
    v-model="form.password"
    type="password"
    placeholder="请输入密码"
    :rules="[
        {required:true,message:'请输入密码'},
        {pattern:/^[A-Za-z0-9]{4,12}$/,message:'请输入4-12位' }
        ]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
<div><a href="javascript:;">还没有账号，去注册~</a></div>
<van-popup v-model="show">{{tcc}}</van-popup>
  </div>
</template>

<script>
import { SignIn } from '@/api/resommend.js'
export default {
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      show: false,
      tcc: ''
    }
  },

  created () {

  },
  methods: {
    async  onSubmit () {
      const res = await SignIn(this.form.username, this.form.password)
      if (res.data.status === 200) {
        this.tcc = res.data.description
        this.show = true
        this.$router.push({
          path: '/layout/my'
        })
      } else {
        this.tcc = res.data.description
        this.show = true
      }
    }
  }
}

</script>

<style scoped lang='less'>
.van-nav-bar{
  background-color: #21b97a;
  /deep/.van-nav-bar__title{
  color: #fff;
  }
  /deep/.van-icon-arrow-left{
    color: #fff;
  }
}
.van-button{
   background-color: #21b97a;
}
</style>
